<template>
  <base-breadcrumb>
    <a-card :bordered="false">
      <title-name title="基本信息" />
      <a-row :gutter="24">
        <a-col
          :md="16"
          :sm="16"
        >
          <a-form-item
            label="所属单位"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              :value="unit"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <!--        <a-col :md="8" :sm="8">-->
        <!--          <a-form-item-->
        <!--            label="分公司"-->
        <!--            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <BaseInput v-model="dels.branchComName" type="text" disabled></BaseInput>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <!--        <a-col :md="8" :sm="8">-->
        <!--          <a-form-item-->
        <!--            label="项目名称"-->
        <!--            :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <BaseInput v-model="dels.projectName" type="text" disabled></BaseInput>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="项目编号"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.projectCode"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="合同额(亿元)"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.contractAmount"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="开工累计实际产值(亿元)"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.actualTotalOutput"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="开工累计实际人均产值(亿元)"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.actualTotalPerOutput"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="开工累计确权产值(亿元)"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.confirmTotalOutput"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="8"
        >
          <a-form-item
            label="开工累计确权人均产值(亿元)"
            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
          >
            <BaseInput
              v-model="dels.confirmTotalPerOutput"
              type="text"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>

      <!-- <title-name title="产值信息"></title-name> -->
      <!-- <a-modal width="900px" v-model="visible" :title="titles">
        <template slot="footer">
          <a-button key="back" @click="handleCancel"> 取消 </a-button>
          <a-button key="submit" type="primary" @click="handleOk"> 再次确认 </a-button>
        </template>
        <a-form-model :model="form" ref="form1" :rules="rules">
          <a-row>
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="当月计划产值(万)"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                prop="planGrossOutput"
              >
                <BaseInputNumber
                  :min="-10000"
                  :max="10000"
                  v-model="form.planGrossOutput"
                  placeholder="请输入"
                ></BaseInputNumber>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="当月实际产值(万)"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                prop="realGrossOutput"
              >
                <BaseInputNumber
                  :min="-10000"
                  :max="100000"
                  v-model="form.realGrossOutput"
                  placeholder="请输入"
                ></BaseInputNumber>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="12">
              <a-form-model-item
                label="当月确权产值(万)"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
                prop="authenticRightGrossOutput"
              >
                <BaseInputNumber
                  :min="-10000"
                  :max="100000"
                  v-model="form.authenticRightGrossOutput"
                  placeholder="请输入"
                ></BaseInputNumber>
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-item
                label="记录人"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <BaseInput v-model="form.creater" disabled></BaseInput>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="12">
              <a-form-item
                label="记录时间"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
              >
                <BaseInput v-model="form.createTime" disabled></BaseInput>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal> -->
    </a-card>

    <a-card>
      <a-tabs
        :default-active-key="activeKey"
        @change="handleTabsClick"
      >
        <a-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :tab="item.label"
        >
          <template v-if="item.value == 'YearOutputValue'">
            <YearOutputValue
              ref="yearOutputValue"
              :is-details="isDetails"
              @refreshYearList="refreshYearList"
            />
          </template>
          <template v-else>
            <s-table
              ref="tableRefs"
              bordered
              :scroll="{ x: 1000 }"
              size="default"
              :row-key="(record) => record.id"
              :columns="columns"
              :data="loadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              show-pagination="auto"
            >
              <span
                slot="serial"
                slot-scope="text, record, index"
              >{{ index + 1 }}</span>
              <span
                v-if="record.submitStatus != 0"
                slot="submitStatus"
                slot-scope="text, record"
              >
                <span>{{ record.submitStatus == 1 ? '待提交' : record.submitStatus == 3 ? '-' : '已提交' }}</span>
              </span>
              <span
                slot="action"
                slot-scope="text, record"
              >
                <MoreButton>
                <a
                  v-if="record.submitStatus != 0"
                  @click="handleRecord(record)"
                >查看</a>
                  <span v-if="isDetails == 0 &&record.submitStatus == 1" v-btn-permission="'pm_029_lcz_04'">
                    <a @click="handleRecord(record, 'edit')">情况说明</a>
                  </span>
                <template v-if="isDetails == 0">
                    <a @click="showPeopleCorrected(record)" v-btn-permission="'pm_029_trs_05'">修正人数</a>
                </template>
                    <a @click="showAdjustPlanForm(record)" v-if="isDetails == 0 && record.isShowAdjustPlanBtn&&record.adjustPlanAmount===null" v-btn-permission="'pm_029_tjh_06'">调整计划产值</a>
                  </MoreButton>
              </span>
            </s-table>
            <div style="position: relative;font-size: 12px">
              <div style="position: absolute;top: -60px;left: 0">
                <p style="color: #FF0000;padding: 0;margin: 0">注意：</p>
                <p style="color: #FF0000;padding: 0;margin: 0">1，见习生在计算人均产值时，按0.5人计算。</p>
                <p style="color: #FF0000;padding: 0;margin: 0">2，当月实际产值、当月确认产值每月25日从商务取，若未取到，则当月产值计0，商务口补录数据后，当月产值计入下月产值。</p>
              </div>
            </div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <Record
      v-model="visible"
      :record-info="RecordInfo"
      @refreshMonthList="refreshMonthList"
    />
    <div class="page-btn-right-top">
      <a-button
        type="primary"
        @click="goBack"
      >
        关闭
      </a-button>
    </div>
<!--修正人数弹窗-->
    <a-modal
            title="修正人数"
            :visible="peopleCorrectedVisible"
            okText="提交"
            cancelText="关闭"
            @ok="handlePeopleOk"
            @cancel="handleCancel"
            width="70%"
    >
      <a-form-model
              ref="peopForm"
              :model="peopForm"
              :rules="peopleRules"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 14 }"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item  label="月份：">
              <a-input v-model="peopForm.month" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="当月项目人数：" prop="employeeSize" class="requiredFormItem">
              <a-input-number :max="999999999" :min="0" :precision="0" :step="1" v-model="peopForm.employeeSize" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="其中见习生人数：">
              <a-input-number :max="999999999" :min="0" :precision="0" :step="1" v-model="peopForm.traineesNumber" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!--修正人数弹窗-->
    <a-modal
            title="调整计划产值"
            :visible="adjustPlanVisible"
            okText="提交"
            cancelText="关闭"
            @ok="handleaDjustPlanOk"
            @cancel="handleCancel"
            width="70%"
    >
      <a-form-model
              ref="adjustPlanForm"
              :model="adjustPlanForm"
              :rules="adjustPlanRules"
              :label-col="{ span: 4 }"
              :wrapper-col="{ span: 14 }"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item  label="月份：">
              <a-input v-model="adjustPlanForm.month" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="当月计划产值（万元）：">
              <a-input v-model="adjustPlanForm.planAmount" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="当月调整计划产值（万元）：" class="requiredFormItem" prop="adjustPlanAmount">
              <a-input-number :max="9999999999999" :min="0"  :precision="2" :step="1" v-model="adjustPlanForm.adjustPlanAmount" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  getOutputValueDetails,
  getProjectOutputValueInfo,
  addOutputValue,
  getOutputBasic,
  getOutputMonthList,
  correctedPersonNumber,
  correctedPersonNumberStatistics,
  adjustPlanOutputValue
} from '@/api/project/productionRecords'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目

import MontnOutputValue from './components/MontnOutputValue'
import YearOutputValue from './components/YearOutputValue'
import Record from './components/Record'

import ARow from 'ant-design-vue/es/grid/Row'
import AFormModelItem from 'ant-design-vue/es/form-model/FormItem'

import moment from "moment"

export default {
  name: 'ProjectRecord',
  components: {
    AFormModelItem,
    ARow,
    STable,
    MontnOutputValue,
    YearOutputValue,
    Record
  },
  data() {
    const columns = [
      {
        title: '序号',
        width: 65,
        scopedSlots: { customRender: 'serial' }
      },
      {
        title: '月份',
        dataIndex: 'monthly',
        width: 80,
      },
      {
        title: '当月项目人数',
        dataIndex: 'employeeSize'
      },
      {
        title: '其中见习生人数',
        dataIndex: 'traineesNumber'
      },
      {
        title: '当月计划产值(万元)',
        dataIndex: 'planAmount'
      },
      {
        title: '月度调整计划产值(万元)',
        dataIndex: 'adjustPlanAmount'
      },
      {
        title: '当月实际产值(万元)',
        dataIndex: 'actAmount'
      },
      {
        title: '当月实际人均产值(万元)',
        dataIndex: 'actPerAmount'
      },
      {
        title: '当月确权产值(万元)',
        dataIndex: 'confirmAmount'
      },
      {
        title: '当月确权人均产值(万元)',
        dataIndex: 'confirmPerAmount'
      },
      {
        title: '月度实际产值完成率(%)',
        dataIndex: 'actualCompletionRate'
      },
      {
        title: '月度确权产值完成率(%)',
        dataIndex: 'affirmCompletionRate'
      },
      {
        title: '状态',
        scopedSlots: { customRender: 'submitStatus' }
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: 150,
        fixed: 'right',
        scopedSlots: { customRender: 'action' }
      }
    ]
    return {
      peopleCorrectedVisible: false,
      peopForm: {
        employeeSize: '',
        traineesNumber: '',
        month: ''
      },
      peopleRules: {
        employeeSize: [
          {
            required: true, message: '请输入当月项目人数', trigger: 'blur'
          }
        ]
      },
      adjustPlanVisible: false,
      adjustPlanForm: {
        adjustPlanAmount: "",
        planAmount: "",
        month: ""
      },
      adjustPlanRules: {
        adjustPlanAmount: [
          {
            required: true, message: '请输入当月调整计划产值', trigger: 'blur'
          }
        ]
      },
      activeKey: 0,
      unit: "",
      tabs: [
        {
          label: '年度产值',
          value: 'YearOutputValue'
        },
        {
          label: '月度产值',
          value: 'MontnOutputValue'
        }
      ],
      businessId: 'PM10',
      visible: false,

      dels: {}, // 项目产值记录

      form: {
        // 录入产值
        creater: JSON.parse(sessionStorage.getItem('ycloud-user_info')).username,
        createTime: this.getNowTime()
      },
      data: [],
      selectedRowKeys: [],
      selectedRows: [],
      reasons: [],
      totalDels: {},
      titles: '产值信息',
      columns,
      queryParam: {
        id: ''
      },
      loadData: (parameter) => {
        this.queryParam.id = this.$route.query.id
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return getOutputMonthList(requestParameters).then((res) => {
          res.data.forEach(item=>{
            const date = item.monthly.replace('年','-').replace('月','-')+'01'
            // console.log(moment().format("YYYY-MM-DD"),moment().isBefore(date, 'month'))
            item.isShowAdjustPlanBtn = moment().isBefore(date, 'month')
          })

          return res
        })
      },
      rules: {
        planGrossOutput: [{ required: true, message: '请输入当月计划产值', trigger: 'blur' }],
        realGrossOutput: [{ required: true, message: '请输入当月实际产值', trigger: 'blur' }],
        authenticRightGrossOutput: [{ required: true, message: '请输入当月确权产值', trigger: 'blur' }]
      },

      id: '',
      isDetails: '',
      RecordInfo: {
        title: '',
        row: {}
      }
    }
  },

  created() {
    this.id = this.$route.query.id
    this.isDetails = this.$route.query.isDetails
    // this.getOutputValueDetails()
    this.getOutputBasic()
  },
  computed: {},
  methods: {
    showPeopleCorrected(row) {
      this.peopForm = {
        employeeSize: row.employeeSize,
        traineesNumber: row.traineesNumber,
        id: row.id,
        month: row.monthly
      }
      this.peopleCorrectedVisible = true
    },
    showAdjustPlanForm(row) {
      this.adjustPlanForm = {
        planAmount: row.planAmount,
        id: row.id,
        month: row.monthly
      }
      this.adjustPlanVisible = true
    },
    handleaDjustPlanOk(){
      let _this = this
      this.$refs.adjustPlanForm.validate((valid) => {
        if(valid) {
          this.$confirm({
            title: '提示',
            content: '计划产值修改后不可再次调整，请确认是否要提交？',
            onOk() {
              adjustPlanOutputValue(_this.adjustPlanForm).then(res=>{
                console.log(_this.$refs,'refs')
                _this.$refs.adjustPlanForm.clearValidate()
                _this.$message.success('提交成功')

                _this.handleCancel()
                _this.refreshMonthList()
              })
            },
            onCancel() {},
          });
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    handlePeopleOk() {
      let _this = this
      this.$refs.peopForm.validate((valid) => {
        if(valid) {
          this.$confirm({
            title: '提示',
            content: '请确认是否要修正人数？',
            onOk() {
              // correctedPersonNumberStatistics
             return  correctedPersonNumber(_this.peopForm).then(res=>{
                _this.$refs.peopForm.clearValidate()
                _this.$message.success('提交成功')
                _this.handleCancel()
                _this.refreshMonthList()
              })
            },
            onCancel() {},
          });
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    // 录入年计划完成 刷新下list
    refreshYearList() {
      this.getOutputBasic()
      this.$refs.yearOutputValue[0].refresh(true)
    },
    refreshMonthList() {
      this.visible = false
      this.getOutputBasic()
      this.$refs.tableRefs && this.$refs.tableRefs[0].refresh(true)
    },
    getOutputBasic() {
      getOutputBasic({ id: this.id }).then((res) => {
        this.dels = res.data
        this.unit = this.dels.branchComName + '/' + this.dels.projectName
      })
    },
    handleTabsClick(val) {
      this.activeKey = val
      this.getOutputBasic()
      if (this.activeKey == 0) {
        this.$refs.yearOutputValue[0].refresh(true)
      } else {
        this.$refs.tableRefs && this.$refs.tableRefs[0].refresh(true)
      }
    },
    goBack() {
      // 关闭
      this.$multiTab.close(this.$route.fullpath)
    },

    getOutputValueDetails() {
      getOutputValueDetails({ id: this.id }).then((res) => {
        if (res.code == 200) {
          // this.dels = res.data
        }
      })
    },

    handleRecord(e, type = 'look') {
      // 产值信息
      this.visible = true
      this.RecordInfo.title = '月度产值情况说明'
      this.RecordInfo.row = e
      this.RecordInfo.type = type
    },

    handleCancel() {
      this.visible = false
      this.peopleCorrectedVisible = false
      this.adjustPlanVisible = false
    },

    handleOk() {
      let that = this
      that.$refs.form1.validate((err, value) => {
        if (err) {
          that.$confirm({
            title: '确认',
            content: '请再次确认填写产值信息，填写后将不能进行修改？',
            onOk() {
              addOutputValue(that.form).then((res) => {
                if (res.code == 200) {
                  that.$message.success('录入产值信息成功')
                  that.visible = false
                  // that.getOutputValueDetails()
                  that.$refs.tableRefs && that.$refs.tableRefs[0].refresh(true)
                } else {
                  that.$message.success('录入产值信息失败')
                  // that.getOutputValueDetails()
                  that.visible = true
                }
              })
            },
            onCancel() {}
          })
        }else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    }
  }
}
</script>


